<template>
  <div class="search-box">
    <div class="city-box" v-show="city" @click="chooseCity">
      <span class="city">{{city}}</span><img class="arrow" :src="arrowIcon" />
    </div>
    <div class="key-word" @click="skipUrl">
      <img class="icon" :src="searchIcon" alt=""> {{placeholder}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    city: {
      type: String, 
      default: ''
    },
    placeholder: {
      type: String, 
      default: '请输入关键字'
    }
  },
  data () {
    return {
      arrowIcon: require('PIC/search/arrow.png'),
      searchIcon: require('PIC/search/search.png')
    }
  },
  methods: {
    chooseCity () {
      this.$emit('chooseCity')
    },
    skipUrl () {
      this.$emit('skipUrl')
    }
  }
}
</script>

<style lang="less" scoped>
.search-box{
  height: 30px;
  width: 100%;
  font-size: 14px;
  background:rgba(242,246,247,1);
  border-radius:6px;
  display: flex;
  align-items: center;
  .city-box{
    height: 20px;
    display: flex;
    align-items: center;
    color: #445166;
    padding:0 10px;
    border-right: 0.5px solid #F2F6F7;
    .city{
      width: 48px;
      overflow: hidden;
    }
    .arrow{
      width: 16px;
      height: 16px;
    }
  }
  .key-word{
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 10px;
    color: #969EA8;
    .icon{
      width: 24px;
      height: 24px;
    }
  }
}
</style>
